<script setup>
import { ref, toRefs, reactive, onBeforeMount } from 'vue';
import CustomEcharts from './components/CustomEcharts.vue';
import { getClusterStatisticsHandler } from '../api/cluster';
const data = reactive({
  // itemList: [
  //   {
  //     id: 'cluster',
  //     header: '集群总数',
  //     total: 25,
  //     seriesName: "集群状态",
  //     data: [
  //       { value: 10, name: 'Active' },
  //       { value: 2, name: 'InActive' },
  //     ]
  //   },
  // ]
  itemList: []
})
onBeforeMount(async() => {
  await getClusterStatisticsHandler().then((res)=>{
    data.itemList= res.data.data.items
    console.log("获取集群资源的统计信息",data.itemList)
  })

})
const { itemList } = toRefs(data)
</script>

<template>
  <div class="auto-echarts-layout">
    <CustomEcharts v-for="(item, index) in itemList" :item="item" :key="index"></CustomEcharts>
  </div>

</template>

<style scoped>
.auto-echarts-layout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* 自动换行 */
  align-items: center;
  div {
    margin: 10px auto;
  }
}
</style>
